 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>收起/展开群组</title>
 </head>
 <body>
 <div id="mountNode"></div>
 <script src="../build/g6.js"></script>
 <script>
   /** 
    * 该案例演示以下功能：
    *  1、双击收起群组；
    *  2、双击展开群组。
   */
   G6.registerNode('circleNode', {
      drawShape(cfg, group) {
        const keyShape = group.addShape('circle', {
          attrs: {
            x: 0,
            y: 0,
            r: 30,
            fill: '#87e8de'
          }
        });

        return keyShape;
      }
    }, 'circle');

   const graph = new G6.Graph({
     container: 'mountNode',
     width: 800,
     height: 600,
     defaultNode: {
       shape: 'circleNode'
     },
     defaultEdge: {
       color: '#bae7ff'
     },
     modes: {
       default: [ 'drag-canvas', 'zoom-canvas', 'collapse-expand-group' ]
     },
     groupStyle: {
      default: {
        lineWidth: 2,
        stroke: '#A3B1BF',
        radius: 10,
        lineDash: [ 5, 5 ],
        strokeOpacity: 0.9,
        fill: '#F3F9FF',
        fillOpacity: 0.8,
        opacity: 0.8
      },
      hover: {
        stroke: '#faad14',
        fill: '#ffe58f',
        fillOpacity: 0.3,
        opacity: 0.3,
        lineWidth: 3
      },
      // 收起状态样式
      collapseStyle: {
        r: 50,
        // lineDash: [ 5, 5 ],
        stroke: '#ffa39e',
        lineWidth: 3,
        fill: '#ffccc7'
      }
     }
   });
 
   const data = {
       nodes: [
         {
           id: 'node6',
           groupId: 'group3',
           label: 'node6-group3',
           x: 500,
           y: 400
         },
         {
           id: 'node1',
           label: 'node1-group1',
           groupId: 'group1',
           x: 100,
           y: 100
         },
         {
           id: 'node9',
           label: 'node9-p1',
           groupId: 'p1',
           x: 300,
           y: 210
         },
         {
           id: 'node2',
           label: 'node2-group2',
           groupId: 'group1',
           x: 150,
           y: 200
         },
         {
           id: 'node3',
           label: 'node3-group2',
           groupId: 'group2',
           x: 300,
           y: 100
         },
         {
           id: 'node7',
           groupId: 'p1',
           label: 'node7-p1',
           x: 200,
           y: 200
         },
         {
           id: 'node10',
           label: 'node10-p2',
           groupId: 'p2',
           x: 400,
           y: 410
         }
       ],
       edges: [
         {
           source: 'node1',
           target: 'node2'
         },
         {
           source: 'node2',
           target: 'node3'
         }
       ],
       groups: [
         {
           id: 'group1',
           title: '1',
           parentId: 'p1'
         },
         {
           id: 'group2',
           title: '2',
           parentId: 'p1'
         },
         {
           id: 'group3',
           title: '2',
           parentId: 'p2'
         },
         {
           id: 'p1',
           title: '3'
         },
         {
           id: 'p2',
           title: '3'
         }
       ]
     };
 
   graph.data(data)
   graph.render()
 
 </script>
 </body>
 </html>
 